<script setup lang="ts" name="Home">
import { provide, ref } from 'vue'
import Child from './components/Child.vue'
const money = ref(100)
const msg = ref('啦啦啦')
const age1 = ref(20)
const child = ref()
// 接收子组件内容
const setChild = (val: string) => {
  console.log(val)
  child.value = val
}

const userName = ref('张三')

// 依赖注入
provide('money', userName.value)
</script>

<template>
  <div class="test-page">
    <h1>父组件 --- {{ money }} --- {{ msg }} -- {{ age1 }} - {{ child }}</h1>
    <hr />
    <!-- vue3 v-model的写法 -->
    <!-- <Child v-model:money="money" v-model:msg="msg"></Child> -->
    <Child
      v-model="age1"
      v-model:money="money"
      :msg="msg"
      @update:msg="msg = $event"
      @on-set="setChild"
    ></Child>
  </div>
  <!-- 
    v-model="msg"
    :xx="msg" @update:xx="msg=$event"

   -->
  <cp-nav-bar></cp-nav-bar>
</template>

<style lang="scss" scoped>
h1 {
  font-size: 33px;
}
</style>
